<template>
  <li ref="cmlItem"
    v-if="isShowItem"
    :class="[showDetailPanel ? 'cml-active' : '']"
    @click="hideTip">
    <!-- popover trigger -->
    <a-popover placement="bottomRight"
      :getPopupContainer="getPopupContainer"
      :destroyTooltipOnHide="true"
      :mouseEnterDelay="3"
      :align="alignConfig"
      overlayClassName="my-overlay"
      :defaultVisible="false"
      :visible="visible"
      @visibleChange="visibleChange">
      <template v-if="!!myTip"
        slot="content">
        <tips :tip="myTip"></tips>
      </template>
      <div class="cml-module-item">
        <p class="cml-module-item-t">{{ title }}</p>
        <span class="cml-module-item-o"
          :style="{ 'padding-right': isShowMore }">
          <slot></slot>
        </span>
        <div class="cml-more"
          v-if="hasMore">
          <base-more @change="more"
            :isActive="showDetailPanel"></base-more>
        </div>
      </div>
    </a-popover>
    <!-- more -->
    <detail-box v-bind="$attrs"
      v-on="$listeners"
      v-if="showDetailPanel"
      :showControl.sync="showDetailPanel">
      <slot name="detail"></slot>
    </detail-box>
  </li>
</template>
<script>
import { mapState } from 'vuex'
import { Popover } from 'ant-design-vue'
import DetailBox from './detail-box'
import BaseMore from './base-more'
import Tips from './tips.vue'

export default {
  name: 'CmlModuleItem',
  inheritAttrs: false,
  components: {
    APopover: Popover,
    DetailBox,
    BaseMore,
    Tips
  },
  model: {},
  props: {
    // 功能模块名称
    title: {
      type: String,
      default: 'Pass Name'
    },
    tipName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      hasMore: false, // 是否包含more面板
      showDetailPanel: false,
      isShowItem: true,
      visible: false,
      alignConfig: {
        points: ['tc', 'br'] // align top left point of sourceNode with top right point of targetNode
        // offset: [10, 20], // the offset sourceNode by 10px in x and 20px in y,
        // targetOffset: ['30%', '40%'], // the offset targetNode by 30% of targetNode width in x and 40% of targetNode height in y,
        // overflow: { adjustX: true, adjustY: true } // auto adjust position when sourceNode is overflowed
      }
    }
  },
  computed: {
    ...mapState('cmlpanel', ['tips']),
    // 控制是否有showmore的样式
    isShowMore() {
      let pd = this.hasMore ? 0 : 30
      return pd + 'px'
    },
    myTip({ tips, tipName }) {
      // const NAME = this.$parent.$options._componentTag.toLowerCase()
      let NAME = tipName || this.findTips(this)
      NAME = NAME && NAME.toLowerCase()
      let myKey = {}
      Object.keys(tips).forEach((key) => {
        myKey[key.toLowerCase()] = key
      })
      let compName = myKey[NAME]
      return tips[compName]
    }
  },
  watch: {},
  created() {},
  mounted() {
    if (this.$slots.detail) {
      this.hasMore = true
    }
  },
  beforeDestroy() {},
  methods: {
    // 更多按钮调用的方法
    more() {
      if (!this.hasMore) return
      this.showDetailPanel = !this.showDetailPanel
    },
    getPopupContainer(trigger) {
      return trigger
    },
    hideTip() {
      this.visible = false
    },
    visibleChange(visible) {
      if (!this.myTip) {
        return false
      }
      this.visible = visible
    },
    findTips(instance, deep = 0) {
      const auth = instance.$_auth
      if (deep >= 3) {
        return null
      }
      if (auth.length) {
        return auth[0]
      } else if (instance.$parent) {
        return this.findTips(instance.$parent, deep + 1)
      }
      return null
    }
  }
}
</script>
<style lang="scss">
.my-overlay {
  padding-top: 0;
}
.ant-popover-arrow {
  display: none;
}
.ant-popover-inner {
  background: #2b2f39;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 1px 3px 6px 3px rgba(0, 0, 0, 0.4);
}
.ant-popover-inner-content {
  padding: 0;
}
.ant-tabs {
  overflow: visible;
}
</style>
